<template>
  <div>
    <el-form :model="form" size="mini" label-position="top" ref="form">
      <el-row :gutter="10">
         <el-col :lg="5" :md="6">
            <el-form-item label="机构">
              <select-tree :branch="form.BRANCHNAME" @getBranchName="getBranch">
              </select-tree>
            </el-form-item>
          </el-col>
           <el-col :lg="5" :md="6" >
            <el-form-item label="坐席列表" prop="agentId">
              <el-select v-model="form.agentId" filterable clearable placeholder="请选择坐席列表" >
                <el-option
                  v-for="item in tableDataUsers"
                  :key="item.AGENTID"
                  :label="item.AGENTNAME"
                  :value="item.AGENTID">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        <el-col :lg="4" :md="6">
          <el-form-item label="开始日期" prop="startDate">
            <el-date-picker size="mini" style="width:100%;" v-model="form.startDate" type="date" value-format="yyyyMMdd"
              placeholder="开始日期" :picker-options="pickerOptionsStart" @change="changeStart">
            </el-date-picker>
            <!-- <el-input v-model="form.startDate" placeholder="请输入开始日期"></el-input> -->
          </el-form-item>
        </el-col>
        <el-col :lg="4" :md="6">
          <el-form-item label="结束日期" prop="endDate">
            <el-date-picker style="width:100%;" size="mini" v-model="form.endDate" type="date" value-format="yyyyMMdd"
              placeholder="结束日期" :picker-options="pickerOptionsEnd" @change="changeEnd">
            </el-date-picker>
            <!-- <el-input v-model="form.endDate" placeholder="请输入结束日期"></el-input> -->
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :lg='2' :md='3' style="margin-bottom:10px;">
          <el-button type="primary" icon="el-icon-search" size='mini' @click="queryVacation">查询
          </el-button>
        </el-col>
        <el-col :lg="2" :md="3" style="margin-bottom:10px;">
          <el-button type="warning" size="mini" icon="el-icon-refresh" @click="resetForm('form')">重置
          </el-button>
        </el-col>
        <el-col :lg="2" :md="3" style="margin-bottom:10px;">
            <el-button type="success" size="mini" icon="el-icon-download" @click="downloadTemplate">导出休假信息</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="holidayData" border>
      <el-table-column prop="AGENTID" label="坐席号"  align="center">
      </el-table-column>
      <el-table-column prop="AGENTNAME" label="坐席名称"  align="center">
      </el-table-column>
      <el-table-column label="休假类型" align="center">
        <template slot-scope="scope">
          <div>
              <el-tag :color="scope.row.CALCOLOUR" style="color:#696062;border-color:#fff;">
                {{scope.row.ACTIVITYTYPENAME}} </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="休假时间" width="450">
        <template slot-scope="scope">
          <div>
              <span style="diaplay:inline-block;height:32px;line-height: 30px">
                <i class="el-icon-alarm-clock" :style="'color:'+scope.row.CALCOLOUR+';'"></i>
                休假时间 <span class="timeClass"> {{scope.row.SRTDATETIME | timeFormat}} </span> 至 <span class="timeClass">
                  {{scope.row.ENDDATETIME | timeFormat}} </span>
              </span>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  import toolBox from "@/common/utils/toolBox"
  import vacationQuery from '@/message/wfm/userScheduleManage/userVacation/userVactationQuery'
  import userVactationQueryImport from '@/message/wfm/userScheduleManage/userVacation/userVactationQueryImport'
  import request from "@/common/utils/requestWFM";
  import selectTree from "@/components/selectTree5/";
  import userQuery from '@/message/wfm/baseData/userManage/userQuery';
  import getGlobalParams from "@/common/utils/getGlobalParams";


export default {
  created(){
    this.form.startDate = toolBox.getCurrentMonthFirstDay();
    this.changeStart();
    this.form.endDate = toolBox.getCurrentMonthLastDay();
    this.changeEnd();
  },
  mounted() {
    this.queryVacation()
    // 查询坐席列表
    this.queryUser();
  },
  components: {
      selectTree
    },
  filters: {
      timeFormat(val) {
        return toolBox.timeFormat(val)
      },
    },
    data() {
      return {
        pickerOptionsStart: {
          disabledDate: (time) => {
            // return time.getTime() < Date.now()
          }
        },
        pickerOptionsEnd: {
          disabledDate: (time) => {
            // return time.getTime() < Date.now()
          }
        },
        tableDataUsers: [],   //坐席数据
        branchNO: this.$store.getters.BranchNum,
        holidayData: [],
        form: { //表单数据
          agentId: this.$store.getters.UserNum,
          startDate: '20190901',
          endDate: '20191030',
          BRANCHNAME: this.$store.getters.BranchName,
          BRANCHNO: this.$store.getters.BranchNum,
        },
        fileUrl: getGlobalParams.get("FileDownloadAddress"),
      }
    },
    methods: {
      getBranch(data) {
        // 机构变化重新赋值
        this.form.BRANCHNO = data.BRANCHNO;
        this.form.BRANCHNAME = data.BRANCHNAME;
        // this.queryPlanMaintain();
        this.queryUser();
      },
      queryUser() { //查询用户表格
        let resBody = new userQuery();
        resBody.data.AGENTID = '';
        resBody.data.AGENTNAME = '';
        resBody.data.BRANCHNO = this.form.BRANCHNO;
        resBody.data.CurrPage = '1'||this.currentPageUser; 
        resBody.data.PageRowNum = '100' || this.pageSize; 
        request(resBody)
          .then(response => {
            if (response.SYS_HEAD.ReturnCode === "000000") {
              this.tableDataUsers = response.BODY.AGENTDATA;
            }else{
              this.$message({
                type: "error",
                message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
              })
            }
          })
          .catch(error => {
            this.loading = false;
          });
      },
       // 导出班表
      async downloadTemplate() {
        let resBody
        resBody = new userVactationQueryImport()
        resBody.data.ACTIVITYTYPE = ''
        resBody.data.AGENTID = this.form.agentId;
        resBody.data.SRTDATETIME = this.form.startDate;
        resBody.data.ENDDATETIME = this.form.endDate;
        resBody.data.BRANCHNO = this.form.BRANCHNO
        let response = await request(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          let res = response.BODY
          let name = res.FileName
          let url = res.FilePath
          this.downloadFile(this.fileUrl + url + '/' + name)
          // console.log(response)
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      changeStart() {
        this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
          disabledDate: (time) => {
            if (this.form.startDate) {
              return time.getTime() < Date.parse(this.form.startDate.slice(0, 4) + '-' + this.form
                .startDate.slice(4, 6) +
                '-' + this.form.startDate.slice(6, 8)) - 8.64e7
            } else {
              // return time.getTime() < Date.now();
            }
          }
        })
      },
      changeEnd() {
        this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
          disabledDate: (time) => {
            if (this.form.endDate) {
              return time.getTime() > Date.parse(this.form.endDate.slice(0, 4) + '-' + this.form.endDate
                .slice(4, 6) + '-' +
                this.form.endDate.slice(6, 8))
            } else {
              // return time.getTime() < Date.now();
            }
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      // 查询坐席休假信息
      async queryVacation() {
        let resBody = new vacationQuery()
        resBody.data.AGENTID = this.form.agentId
        resBody.data.BRANCHNO = this.form.BRANCHNO
        resBody.data.SRTDATETIME = this.form.startDate
        resBody.data.ENDDATETIME = this.form.endDate
        let response = await request(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          // console.log(response.BODY)
          this.holidayData = response.BODY.HOLIDAYINFO
          var data = [];
          if(this.holidayData.length > 0){
            this.holidayData.forEach(item => {
              item.ACTIVITYINFO.map(ele=>{
                ele.AGENTID = item.AGENTID 
                ele.AGENTNAME = item.AGENTNAME
              })
            });
            this.holidayData.forEach(item=>{
              item.ACTIVITYINFO.forEach(info=>{
                data.push(info);
              })
            })
            this.holidayData = data
          }
          // console.log(data)
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
    },
}
</script>
<style scoped>
  .timeClass {
    font-weight: bold;
  }

  .el-card {
    margin-bottom: 10px;
  }

  .el-card.card_h {
    height: 100%;
  }

  /* .v_date{
  color: #409EFF;
} */
  .coll_h {
    height: 200px;
    overflow-y: auto;
    /* overflow-x: hidden; */
  }

  .coll_h::-webkit-scrollbar {
    display: none;
  }

  .infoMsg {
    font-size: 14px;
    color: #666666;
  }

  .infoMsg li {
    padding: 6px 0;
  }

</style>
